<template>
  <div class="home">
    <div>
      <div class="ffbb">
      <h1>后台管理系统</h1>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="user"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            style="color: #fff"
          />
          <van-field
            v-model="password"
            type="password"
            name="pass"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请写密码' }]"
            color="red"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="onSubmit">
            Sign
          </van-button>
        </div>
      </van-form>
      <p>账号：admin 密码：123456</p>
    </div>
    </div>
    
  </div>
</template>

<script >
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router"; //引入跳转
import instance from "@/api/index";
import debounce from "@/api/debounce";
export default {
  name: "Login",
  setup() {
    const route = useRoute();
    const username = ref("");
     const router = useRouter();
    const password = ref("");
    const onSubmit = (values) => {
      instance.get("/login").then((res) => {

        let user = res.data.message.user;
        let pass = res.data.message.pass;
        if (values.user == user && values.pass == pass) {
          router.push({
            path: "/about",
          });
        }
      });
    };
    let fn = debounce(onSubmit, 1500);
    return {
      username,
      password,
      fn,
      onSubmit,
    };
  },
};
</script>
<style scoped>
.ffbb {
  margin-top: 120px;
  width: 450px;
  padding: 35px 35px 15px 35px;
  margin: 100px auto;
}
.ffbb h1 {
  color: #fff;
  font-size: 26px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 30px;
}
.van-cell-group {
  background: #2d3a4b;
}
.van-field {
  background: #2d3a4b;
  border: 1px solid #4d627d;
  margin-bottom: 20px;
}
.van-field__control {
  color: none;
}
p {
  color: #fff;
}
#van-field-9-input {
  color: #fff;
}
</style>
